<template>
	<view class="box">
		<view class="index-bg">
			<image :src="BASE_URL +'/uploads/20250801/2ec50fa1c5a0f6b3c224709d3ae527c2.png' " mode="widthFix"></image>
		</view>
		<view class="z-1">
			<u-navbar :titleStyle='{"color":"#Fff"}' leftIconColor='#fff' title="基础健康" bgColor="transparent"
				:fixed="false" @rightClick="rightClick" :autoBack="true"> </u-navbar>
			<view class="padding-l-r-25">
				<view class="justifyContent-spaceBetween palatino-box">
					<view class="palatino-list" @click="triage">
						<image :src='BASE_URL+ "/uploads/20250801/76e8596b97e6bbb4e49fba5378ebac20.png" ' mode="widthFix"></image>
						<view class="palatino-tips">
							<text>智能分诊</text>
							<view>Intelligent triage</view>
						</view>
					</view>
					<view class="palatino-list" @click='goHealthReport'>
						<image :src='BASE_URL +"/uploads/20250801/aaa3b42a9dea7c31ed3676214c9a9620.png"' mode="widthFix"></image>

						<view class="palatino-tips">
							<text>健康报告</text>
							<view>health report</view>
						</view>
					</view>
				</view> 
				<view class="margin-t-20 role-box flex-box">
					<view class="z-1 flex-box" style="width: 100%;">
						<scroll-view scroll-x style="max-width: 580rpx; ">
						    <view class="flex-box" >
						        <view class=" flex-column role-list" @click="getViewInfo(sickItem,0)"  :class="{'active':roleIndex == 0}">
						            <view class="avatar-box">
										  <u-avatar :src="sickItem.avatar" :size='48'></u-avatar>
						                <!-- <image :src="sickItem.avatar" mode="aspectFill"></image> -->
						            </view>
						            <text>{{sickItem.name}}</text>
						            <view  class="role-text role-type">
						                主账号  
						            </view>
						
						            <view class="triangle-img">
						                <image src="/static/image/family/triangle-fill.png" mode="aspectFill"></image>
						            </view>
						        </view>
						        <view class=" flex-column role-list" v-if="!doctor">
						            <view class="avatar-box">
										 <u-avatar :src="doctor.avatar" :size='48'></u-avatar>
						                <!-- <image :src="doctor.avatar" mode="aspectFill"></image> -->
						            </view>
						            <text>{{doctor.name}}</text>
						
						            <view  class="role-text1 role-type">
						                家医助理
						            </view>
						        </view>
								<view v-if="roleList && roleList.length" class="align-items-center">
									<view v-for="(item,index) in roleList" :key="index" class=" flex-column role-list" @click="getViewInfo(item,index+1)"  :class="{'active':roleIndex == index+1}">
									    <view class="avatar-box">
									        <image :src="item.avatar" mode="aspectFill"></image>
									    </view>
									    <text class="only-1">{{item.name}}</text>
															
									    <view   class="role-text1 role-type">
									        {{item.relation}}
									    </view>
															
									    <view class="triangle-img">
									        <image src="/static/image/family/triangle-fill.png" mode="aspectFill"></image>
									    </view>
									</view>
								</view>
						       
						    </view>
						
						</scroll-view>
						<view class="flex-1"></view>
						<view class="add-role flex-column fs-26" @click="add">
							<image src="/static/image/BasicHealth/add.png" mode="widthFix"></image>
							<text>添加</text>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="z-1 ">
			<view class="patient-box">
				<view class="patient-info more-info">
					<view class="patient-info-title justifyContent-spaceBetween">
						<text>患者信息</text>
						<view class="align-items-center" @click="goMoreInfo">
							更多信息
							<image src="/static/image/BasicHealth/right.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="patient-list flex-box border-b">
						<view class="flex-1 border-r only-1">
							姓名：{{patientInfo.name}}
						</view>
						<view class="flex-1 only-1">
							性别：{{Number(patientInfo.gender)>0?'男':'女' }}
						</view>
					</view>
					<view class="patient-list flex-box">
						<view class="flex-1 border-r only-1">
							年龄：{{patientInfo.age}}
						</view>
						<view class="flex-1 only-1">
							与患者关系：{{patientInfo.relation}}
						</view>
					</view>
				</view>
				<view class="patient-info margin-t-20">
					<view class="patient-info-title justifyContent-spaceBetween">
						<text>患者用药记录</text>

					</view>
					<view v-if="medicationList && medicationList.length" class="padding-20">
						<view v-for="item in medicationList" class="medication-list padding-20 margin-b-20">
							<view class="name">{{item.medicine_name}}</view>
							<view>{{item.medicine_dosage}}</view>
							<view class="line"></view>
							<view class="flex-box">
								<view class="flex-column flex-1">
									频率<text>{{item.medicine_frequency}}</text>
								</view>
								<view class="flex-column flex-1">
									天数<text>{{item.medicine_days}}</text>
								</view>
								<view class="time flex-column">
									开药时间<text>{{item.medicine_start_date}}</text>
								</view>
							</view>
						</view>
					</view>
					<view v-else class="padding-20">
						<u-empty mode="order" text='无用药记录'></u-empty>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import $baseUrl from "@/config/index.js"
const BASE_URL = $baseUrl.baseUrl
	import {
		familyList
	} from '@/api/basicHealth'
	import {
		familyData,
		historyDetail,
		sickDetail,
		historyEdit,
		liveDetail,
		liveEdit,
		tijianList,
		seeList,
        medicineList
	} from '@/api/family'
	export default {
		data() {
			return {
                BASE_URL,
                doctor:{
					avatar:'',name:''
				},
                sickItem:{},
				navBarHeight: '',
				roleList: [ ],
				patientInfo: { },
				medicationList: [ ],
                roleIndex:0
			}
		},
		onLoad() {
			// this.getFamilyData()
		},
		onShow() {
			this.getFamilyData()
		},
		methods: {
			initInfo(){
				this.roleList = []	
				this.doctor ={}
				that.sickItem ={}
				this.getFamilyData()
			},
			getFamilyData() {
				let that = this
                let arr= []
				familyData().then(res => { 
					if (res.code == 1) {
						res.data.sick_list.map(item => { 
							if (item.relation == '本人') {
								that.sickItem = item
								this.getInfoDetail(item.id)
                                this.getViewInfo(item,0 )
							} else {
								arr.push(item)
							}
						}) 
                        this.doctor = res.data.doctor || {} 
						that.roleList =arr
					}
				})
			},
			getInfoDetail(id) {
				console.log(id,"cc");
				this.getSickDetail(id)
                this.getMedicineList(id)
			},
           getMedicineList(id){
                let params = {
                    sick_id: id,
                    limit:20,
                    page:1
                }
                medicineList( params).then(res => {
                    if (res.code == 1) {
                        this.medicationList = res.data
                    }else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        })
                    }
                })
           },
			goHealthReport(){
				uni.navigateTo({
					url:"/pageA/BasicHealth/healthReport"
				})
			},

            // 患者详情
            getSickDetail(id) {
                sickDetail({
                    sick_id: id
                }).then(res => {
                    if (res.code == 1) {
                        this.viewInfo = res.data
                    }
                })
            },
            goMoreInfo(){
                uni.navigateTo({
                    url: `/pageA/family/add?id=${this.patientInfo.id}`
                })
            },
			add() {
				uni.navigateTo({
					url: '/pageA/family/add'
				})
			},
			rightClick() {},
			getfamilyList() {
				familyList().then(res => {
					console.log(res)
				})
			},
			triage() {
				uni.navigateTo({
					url: '/pageA/triage/triage'
				})
			},
            getViewInfo(item,i){
                this.roleIndex = i
                this.patientInfo = item
            }
		}
	}
</script>

<style lang="scss" scoped>
@import "css/index";
	.box {
		position: inherit;
		min-height: 100vh;
		background: linear-gradient(154deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);


	}

    .only-1 {
        max-width: 120rpx;
    }
	.palatino-box {
		width: 100%;
		margin-top: 70rpx;

		image {
			width: 340rpx;
		}

		.palatino-list {
			position: relative;

			role-list {
				margin-left: 20rpx;
			}
			.palatino-tips {
				position: absolute;
				left: 20rpx;
				top: 18rpx;

				text {
					font-weight: bold;
					font-size: 30rpx;
					color: #FFFFFF;
					text-shadow: 0 2px 2px #259D18;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				view {
					font-weight: 400;
					font-size: 18rpx;
					color: #FFFFFF;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}
		}
	}

	.patient-box {
		box-sizing: border-box;
		height: auto;
		padding: 25rpx;
		background: #FFFFFF;
		box-shadow: 0px -1px 4px 1px rgba(0, 0, 0, 0.1);
		border-radius: 20rpx 20rpx 0 0;

		.patient-info {
			border-radius: 20rpx;
			border: 1px solid #DBDBDB;

			&.more-info {
				height: 222rpx;

			}

			&-title {
				padding-left: 24rpx;
				padding-right: 16rpx;
				align-items: center;
				height: 80rpx;
				background: #F1F8F9;
				font-size: 24rpx;
				color: #43ABC4;
				box-sizing: border-box;

				text {
					font-weight: bold;
					font-size: 30rpx
				}

				image {
					width: 20rpx;
					margin-left: 12rpx;
				}
			}
		}
	}

	.patient-list {
		height: 70rpx;
		font-size: 28rpx;
		color: #000;
		line-height: 70rpx;

		.flex-1 {
			padding-left: 24rpx;
            min-width: 50%;
		}

		&.border-b {
			border-bottom: 1px solid #DBDBDB;
		}

		.border-r {
			border-right: 1px solid #DBDBDB;
		}
	}

	.medication-list {
		background: #F4FCFE;
		border: 1px dashed #43ABC4;
		font-size: 26rpx;
		color: #000;

		.name {
			font-weight: 500;
			font-szie: 32rpx;
			margin-bottom: 10rpx;
		}

		.line {
			height: 1px;
			background-color: #DBDBDB;
			margin: 20rpx 0;
		}

		.time {
			width: 280rpx;
		}

		.flex-column {
			font-size: 24rpx;
			color: #707070;

			text {
				margin-top: 10rpx;
				font-size: 26rpx;
				color: #000;

			}
		}
	}
</style>